视频切换无缝衔接 打造丝滑体验 | 高仿腾讯新闻
本文作者
作者：zzh12138
链接：
https://www.jianshu.com/p/ff9f11da13c0
本文由作者授权发布。
是的，你没看错，又是腾讯视频！又是高仿！没办法啊，产品喜欢抄袭别人
还是上效果图吧
腾讯新闻效果
同样是新闻客户端，为什么你这么优秀。
好了，看看demo的效果。
高仿效果
跟原效果还是有点差别的。
注意：以上 gif 图是我在作者的gif 之上，二次录制和压缩的...有兴趣的最好还是运行下sample。
拆解一下页面效果吧：
新闻页面视频滚动到屏幕中间自动播放(wifi下,demo没有判断)
点击视频，页面切换到视频列表页面，期间视频不会停止播放，平滑过渡到第二个页面
视频列表页面滑动后，播放第一个完全可见的视频(个人理解，理解错了大佬不要打我)
视频列表页面，视频播放时，点击评论数，切换到评论页面，效果同上
视频列表页面，视频播放时，点击其他item任意区域，该item滑到顶部，并播放视频
无缝续播的原理这里不做讲解(其实我也不会呀...),做过播放器的应该都懂吧，原理大致就是：
解码器动态关联不同的渲染视图（RenderView），比如使用MediaPlayer动态关联SurfaceView，就如同一个电脑主机不断连接不同的显示器。
PS:这里注意一下，render不要重置，不然会闪屏哦。
Demo中用的是这个播放器 PlayerBase,高度解耦(不像其他播放器一样，对布局文件有限制)，支持各种自定义，最大的好处的就是提供能无缝续播助手(续播的话不要使用mediaPlayer，会出现问题)。
美滋滋
这里还是简单说下播放器怎么用吧，不需要改界面的话(demo中略微做了修改)，直接拷下面红色方框中的类，在Application里面进行配置就可以使用啦(ijk,exo需要引入对应的库哦,demo中ijk不支持https，所以视频可能不能播放)。
无缝续播相关都在RelationAssist类里。续播的话直接调用
AssistPlayer.get().play(mContainer, null);
就可以在不同的容器内(即上面的mContainer)继续播放之前的内容了。
需要自定义界面或者有其他问题的参考这里和demo，有问题的加群问群主吧。
新闻列表页
用RecyclerView实现，这里说一下页面滑动对视频item的处理：当页面停止滑动后，判断是屏幕中央是否有可见的视频item,有则开始播放。同时，判断之前是否有在播放的视频滑出了界面，有则停止播放。
//伪代码
if (newState == SCROLL_STATE_IDLE) {
//滑动屏幕中间开始
LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager();
int first = manager.findFirstVisibleItemPosition();
int last = manager.findLastVisibleItemPosition();
for (int i = first; i <= last; i++) {
if (isVideo) {
//列表视频
if (isCenter && !AssistPlayer.get().isPlaying()) {
ImageView imageView = view.findViewById(R.id.adapter_video_image);
imageView.performClick();
break;
}
}
}
//滑出屏幕高度一半停止播放
int playPosition = mAdapter.getPlayPosition();
if (playPosition != -1) {
if (isOutSide) {
stopPlay();
}
}
视频列表页
同样也是RecyclerView实现，这里滑动播放逻辑跟新闻列表页有点不同(纯属个人理解，理解错了各位大佬别打我)。进入页面播放第一个视频，上滑会加载更多(demo里面没有实现)。上下滑动停止后，会播放当前屏幕完全可见的第一个item的视频。
并且，当播放视频时，点击其他item的任意位置，该item会滑动到顶部并播放视频。当前视频播放完毕后，如果列表页后面还有视频，会自动播放下一个，并将该item滑到页面顶部。当退出视频列表页时，如果播放的不是第一个视频，则不需要过渡动画。
滑动监听：
if (newState == SCROLL_STATE_IDLE) {
LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager();
int first = manager.findFirstVisibleItemPosition();
int pos = manager.findFirstCompletelyVisibleItemPosition();
if (pos != mAdapter.getPlayPosition()) {
View view = mRecycler.getChildAt(pos - first);
ImageView imageView = view.findViewById(R.id.adapter_video_list_image);
imageView.performClick();
}
}
因为已经对滑动进行了监听，所以自动播放下一个视频可以通过滑动item来实现:监听视频的播放事件，当视频播放完毕后，判断该视频是否是最后一个，不是则滑到屏幕顶部，播放视频。
PS:滑动要调用smoothScroll方法，不能直接调scroll。
评论页
评论页只是一个播放器容器和一个显示评论数据的recyclerView(demo里面没有做评论盖楼)，这里不细说，详见demo。
重点来了，第一眼看到视频平滑过渡切换页面，想到的就是google在5.0版本提供activity切换的共享元素动画，但实操之后发现效果不怎么理想。
效果如图：
退出activity会闪屏
也试过，去掉系统的默认动画，将主题设置为透明，自己手动平移，放缩view，还是有点问题(可能是我姿势不对)。还是会有上面的闪屏问题。
没办法罗，只能在当前activity里面进行过渡了。这里我的做法是在根布局添加一个fragment。这里着重说一下要注意的几个地方吧：
需要重写onBackPressed(),区分是否横屏模式，是否显示了评论页，列表视频页，还是普通新闻页。
列表视频页，普通新闻页都需要记录下当前播放的item的position，退出页面会用到。
列表视频，评论页请求回来的网络数据不能过早显示。
过渡动画需要在view绘制好后才开始执行。
下面是页面过渡的过程：
有点丑，将就点吧
获取view的属性（宽高、位置）,新闻的信息，并传给fragment
fragment背景设置为透明,改变关联的view属性，并开始动画，还原背景色和view的属性，这里有个地方需要特别留意，如果你的播放容器跟我一样是放在recyclerView里面的，那么位移的view必须是整个item！整个item！整个item！(子view总不可能跑出父view的范围吧...)
动画完毕后显示加载的网络数据(按个人需求进行修改)
退出fragment的时候，将动画反转一遍就OK啦。要注意当前播放的视频是否是进来播放的那个，是的话才需要执行动画哦。
FragmentTransaction transaction = getFragmentManager().beginTransaction();
Bundle bundle = new Bundle();
bundle.putParcelable("attr", attr);
bundle.putParcelable("news", bean);
commentFragment.setArguments(bundle);
commentFragment.setOnCloseClickListener(this);
transaction.add(R.id.fragment_video_list_comment_container, commentFragment);
transaction.commit();
}
mContainer.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
//绘制完毕，开始执行动画
mContainer.getViewTreeObserver().removeOnPreDrawListener(this);
mContainer.getLocationOnScreen(location);
mContainer.setTranslationX(mAttr.getX() - location[0]);
mContainer.setTranslationY(mAttr.getY() - location[1]);
mContainer.setScaleX(mAttr.getWidth() / (float) mContainer.getMeasuredWidth());
mContainer.setScaleY(mAttr.getHeight() / (float) mContainer.getMeasuredHeight());
mRecycler.setAlpha(0);
mTextView.setAlpha(0);
mClose.setAlpha(0);
mCommentNum.setAlpha(0);
mContainer.animate().translationX(0).translationY(0).scaleX(1).scaleY(1).setDuration(DURATION);
mRecycler.animate().alpha(1).setDuration(DURATION);
mTextView.animate().alpha(1).setDuration(DURATION);
mClose.animate().alpha(1).setDuration(DURATION);
mCommentNum.animate().alpha(1).setDuration(DURATION);
AssistPlayer.get().play(mContainer, null);
return true;
}
});
大功告成
有疑问(播放器相关的点这里)或者demo有bug的可以留言,看到会回复的。
用到的播放器的地址：
https://github.com/jiajunhui/PlayerBase
附上本案例源码(Kotlin版可能会有一点语法问题...)
Java_Demo
https://github.com/zzh12138/VideoDemoJava
Kotlin_Demo
https://github.com/zzh12138/VideoDemo_Kotlin
PS:广州附近有坑位，招一年开发仔的吗？有的联系下呗。
推荐阅读：
扫一扫 关注我的公众号
如果你想要跟大家分享你的文章，欢迎投稿~
┏(＾0＾)┛明天见！